<template>
	<view class="invite" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom
			title="我的推荐人"
			:isSpace="true"
			:isAppBtn="false"
			:isHome="false"
		></HeadCustom>
		<view class="invite-content">
			<view class="invite-item fboxRow Ycenter" v-if="references.realName">
				<img class="invite-img" :src="references.avatar" alt="" srcset="" />
				<view class="invite-msg fboxCol">
					<view class="invite-name font32">
						{{ references.realName }}
					</view>
					<view class="msg-box">
						<text class="msg font28" style="margin-right: 20rpx">
							{{ references.positionName || references.industry }}
						</text>
						<text class="msg font28">
							{{ references.companyName || references.status }}
						</text>
					</view>
				</view>
			</view>

			<view class="invite-item fboxRow Xbetween Ycenter" v-else>
				<text class="font28 invite-text">暂无推荐人信息，点击添加</text>
				<view class="add-btn" @click="openModel">添加</view>
			</view>
		</view>
		<ModelPublic title="添加推荐人" ref="modelPublicRef" @confirm="confirmTxt">
			<template #msg>
				<view class="model-msg">
					<u--input
						placeholderStyle="border:none;" placeholderClass="inputPlaceholder"
						type="number"
						placeholder="请输入推荐人手机号"
						border="none"
						maxlength="11"
						v-model="referencesmobile"
					></u--input>
				</view>
			</template>
		</ModelPublic>
	</view>
</template>

<script>
import ModelPublic from '@/components/model-public/index.vue';
import { connectByMobile, connectParent } from '@/api/mine.js';
import { utf8to16, base64decode, base64encode } from '@/static/js/Base64.js';
import { getRequest } from '@/static/js/common.js';
export default {
	components: { ModelPublic },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			referencesmobile: '',
			references: {},
			detailMsg: {}
		};
	},
	mounted() {
		// #ifdef H5
		window.appGetMsgCallback = this.appGetMsgCallback;
		// #endif
	},
	methods: {
		// 打开添加推荐人弹窗
		openModel() {
			const obj = {
				type: 'getdeviceMsg'
			}

			const _this = this;
			this.$bridge.callHandler('recruitHandler', obj, (res) => {
				console.log('recruitHandler', '返回');
				_this.appGetMsgCallback(res);
			});
		},
		appGetMsgCallback(res) {
			console.log('设备信息===============', res);
			this.detailMsg = res

			this.$refs.modelPublicRef.show = true;
		},
		confirmTxt() {
			if (this.referencesmobile.length != 11) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			connectByMobile({
				data: {
					mobile: this.referencesmobile
				},
				header: {
					...this.detailMsg
				}
			}).then((res) => {
				if (res.data) {
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					});
					this.$refs.modelPublicRef.show = false;
					this.getInit();
				}
			});
		},
		getInit() {
			connectParent({}).then((res) => {
				if (res.data) {
					this.references = res.data;
				}
			});
		}
	},
	onLoad(option) {
		if (option && option.benwu) {
			let benwu = utf8to16(base64decode(option.benwu));
			const token = {
				access_token: getRequest(benwu, 'token'),
				memberId: getRequest(benwu, 'memberId'),
				statusBarHeight: getRequest(benwu, 'statusBarHeight')
			};
			this.statusBarHeight = token.statusBarHeight;
			uni.setStorageSync('bw_params', JSON.stringify(token));
		}
		this.getInit();
	}
};
</script>

<style scoped lang="scss">
.model-msg {
	width: 100%;
}
::v-deep .u-input {
	background-color: #f4f8fb;
	padding: 22rpx 32rpx !important;
}
.invite {
	min-height: 100vh;
	.invite-content {
		padding: 24rpx;
		.invite-item {
			height: 154rpx;
			background: #ffffff;
			border-radius: 12rpx;
			padding: 24rpx;
			.invite-img {
				width: 88rpx;
				height: 88rpx;
				margin-right: 24rpx;
				border-radius: 12rpx;
			}
			.invite-msg {
				justify-content: space-between;
				height: 100%;
				padding: 10rpx 0;
				.invite-name {
					color: #111018;
				}
				.msg-box {
					color: #6d6d76;
				}
			}
			.invite-text {
				color: #98979c;
			}
			.add-btn {
				background: linear-gradient(360deg, #ad7b54 0%, #d8a37a 100%);
				border-radius: 8rpx;
				color: #fff;
				padding: 10rpx 20rpx;
			}
		}
	}
}
</style>
